<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>componet</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="todo">
			<todo-item ></todo-item>
			<todo-item></todo-item>
			<todo-item></todo-item>
			<todo-item></todo-item>
		</div>
		
		<div id="dongtai">
			<dongt :txt="text"></dongt>
		</div>
		<script>
			// 定义名为 todo-item 的新组件
			Vue.component('todo-item', {
				template: '<li>这是个待办项aaaaaaaa</li>'
			})
			var todo = new Vue({
				el:'#todo',
				data:{
					
				}
			})
			
			
			// 定义名为 新的动态组件
			Vue.component('dongt', {
				//父属性
				props:['txt'],
				template: '<li>{{txt}}</li>'
			})
			
			
			var dongtai = new Vue({
				el:"#dongtai",
				data:{
					text:'来自父组件的内容'
				}
			})
			
		</script>
	</body>
</html>
